<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="账单周期"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.billEndDate"
						placeholder="请选择"
						style="width:350px"
						:popper-append-to-body="false"
						@change="changeBillEndDate"
					>
						<el-option
							v-for="item in billDateList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-input
						v-model="queryData.searchMemberName"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						style="width:330px"
						@input="forceUpdate"
					>
						<el-select
							slot="prepend"
							v-model="queryData.memberType"
							:placeholder="$t('common.please_choose')"
							style="width:110px"
							@change="handleInputType"
						>
							<el-option
								:label="$t('funds.user_name')"
								:value="5"
							></el-option>
							<el-option
								label="上级代理"
								:value="6"
							></el-option>
							<el-option
								label="所属总代"
								:value="7"
							></el-option>
							<el-option
								label="所属代理"
								:value="8"
							></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90750055')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button
						size="mini"
						:type="queryData.periodType==item.value?'primary':''"
						v-for="(item, index) in dateButtonList"
						:key="index"
						@click="getButtonDate(item.value)"
					>
						{{ item.label }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				:default-sort="{
					prop: 'staticsDate',
					order: 'descending'
				}"
				:key="headKey"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				@sort-change="changeTableSort"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<!-- show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				" -->
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
					<template slot="header" slot-scope="{ column, $index }">
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
							v-if="item.itemTipContent"
						>
							{{ item.label }}
							<el-tooltip
								class="item"
								effect="dark"
								:content="item.itemTipContent"
								placement="top-start"
							>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
							v-else
						>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row }">
						<div v-if="item.solt === 'numberSolt'">
							<span
								:style="
									handleNumberColor(row[newCol[index].prop])
								"
							>
								{{
									handleNumber('USDT', row[newCol[index].prop], 2, true, true)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'defaultSoltTime'">
							{{ dayjs(String(row.cycleStartDate)).format('YYYY-MM-DD') }}  00:00:00 至 {{ dayjs(String(row.cycleEndDate)).format('YYYY-MM-DD') }} 23:59:59
						</div>
						<div v-if="item.solt === 'updatedAtSolt'">
							{{ row.updatedAt.replaceAll('/','-') }}
						</div>
						<div v-if="item.solt === 'aloneAddLast'">
							<span
								v-if="row.lastPeriodShouldReceiptPaymentParentAmount >0"
							>
								{{handleNumber('USDT',Math.abs(row.lastPeriodShouldReceiptPaymentParentAmount),2)}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneReduceLast'">
							<span
								v-if="row.lastPeriodShouldReceiptPaymentParentAmount <0"
							>
								{{handleNumber('USDT',Math.abs(row.lastPeriodShouldReceiptPaymentParentAmount),2)}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneAdd'">
							<span
								v-if="row.shouldPaymentReceiptParentAmount > 0"
							>
								{{handleNumber('USDT',Math.abs(row.shouldPaymentReceiptParentAmount),2)}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneReduce'">
							<span
								v-if="row.shouldPaymentReceiptParentAmount < 0"
							>
								{{handleNumber('USDT',Math.abs(row.shouldPaymentReceiptParentAmount),2)}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<span v-if="item.solt === 'operate'&&hasPermission('90750069')">
							<el-link
								class="lightBlueColor"
								type="primary"
								@click="dialogData(row)"
							>
								查看详情
							</el-link>
						</span>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[newCol[index].prop] || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<detail-page
			v-if="visible"
			:detailData="detailData"
			:visible="visible"
			:memberDatas="memberDatas"
			:closeDialog="
				() => {
					visible = false
				}
			"
		/>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
			:before-close="cancleSetColumn"
			:close-on-click-modal="false"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(item, index) in oldCol"
				:key="index"
				class="setting-div"
			>
				<el-checkbox v-if="index !== 0" v-model="item.isShow">
					{{ item.label }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancleSetColumn()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- 详情弹窗 -->
		<chargeDialog
			v-if="chargeDialogVisible"
			:visible.sync="chargeDialogVisible"
			@handleVisible="chargeDialogVisible = false"
			:curData="curData"
			:queryData="childrenAjaxData"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
// import Sortable from 'sortablejs'
import { Storage } from '@/utils/compose'
import summaryList from './components/summaryList'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
import chargeDialog from './components/chargeDialog'
const setSearchTime = () => [
	dayjs()
		.subtract(0, 'day')
		.startOf('day'),
	dayjs()
		.subtract(0, 'day')
		.endOf('day')
]
export default {
	name: routerNames.memberReturnData,
	components: {
		MainContent,
		chargeDialog
	},
	mixins: [list, summaryList],
	data() {
		return {
			dayjs,
			tableHeight: 480,
			chargeDialogVisible: false,
			otherDependenComponents: [],
			accountTypeArr: [
				{
					value: 1,
					label: '全部总代'
				},
				{
					value: 2,
					label: '指定代理'
				}
			],
			searchTime: setSearchTime(),
			curData: '',
			queryData: {
				periodType: 5,
				memberType: 5,
				searchMemberName: '',
				billEndDate: ''
			},
			tableData: [],
			subSummary: {},
			totalSummary: {},
			billDateList: [],
			detailData: {},
			memberDatas: [],
			visible: false,
			loading: false,
			exportBtnLoading: false,
			oldCol: [],
			dropCol: [],
			dateButtonList: [
				{
					label: '本账期',
					value: 4
				},
				{
					label: '最新账单',
					value: 5
				},
				{
					label: '近4期',
					value: 1
				},
				{
					label: '近8期',
					value: 2
				},
				{
					label: '近12期',
					value: 3
				}
			],
			newCol: [],
			childrenAjaxData: '',
			colSettings: {
				visible: false
			},
			// 拖拽状态
			dragState: {
				start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
				end: -3, // 移动鼠标时所覆盖的元素 index
				dragging: false, // 是否正在拖动
				direction: undefined // 拖动方向
			},
			headKey: 'agentRebateData', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
			scrollX: 0 // 初始x轴scroll位置（用于定位X轴滚动条）
		}
	},
	computed: {},
	watch: {
		oldCol: {
			handler(newVal) {
				if (newVal) {
					setTimeout(() => {
						this.newCol = newVal.filter((its) => {
							return its.isShow === true
						})
					}, 1000)
				}
			},
			deep: true
		}
	},
	created() {
		const storageColumn = this.getSaveTableData()
		this.dropCol = getColumns()
		const uu_Id = this.$store.state.user.userInfo?.id
		this.oldCol =
			storageColumn &&
			storageColumn[`${uu_Id}_commonTableKey_memberTeamBill`]
				? storageColumn[`${uu_Id}_commonTableKey_memberTeamBill`]
				: this.dropCol
		this.newCol = this.oldCol
	},
	mounted() {
		this.getSettlementBillTimeList()
	},
	methods: {
		changeBillEndDate(){
			this.queryData.periodType = 6
		},
		forceUpdate(value) {
			this.$forceUpdate()
			this.queryData.searchMemberName = this.queryData.searchMemberName.replace(
				/[^A-Za-z0-9]/g,
				''
			)
		},
		handleInputType(val) {
			// this.$refs.checkboxDom.clearAllSelect()
		},
		getButtonDate(val) {
			this.queryData.periodType = val
			this.queryData.billEndDate = ''
			this.queryData.cycleStartDate = ''
			this.queryData.cycleEndDate = ''
			if(val==4){
				this.queryData.billEndDate = 0
			}else{
				if(this.billDateList.length>1){
					if(val==5){
						this.queryData.billEndDate = 1
					}else if(val==1){
						this.queryData.billEndDate = this.billDateList.length-3
					}else if(val==2){
						this.queryData.billEndDate = this.billDateList.length-2
					}else if(val==3){
						this.queryData.billEndDate = this.billDateList.length-1
					}
				}else{
					this.queryData.billEndDate = ''
				}
			}
			this.loadData()
		},
		getSettlementBillTimeList() {
			this.loading = true
			const params = {
				pageNum: 1,
				pageSize: 200,
				periodType: 6
			}
			this.$api
				.proxyTeamBillPeriod(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record } = res?.data
						if (record.length > 1) {
							this.billDateList = record.map(
								(item, index) => {
									const startTime =dayjs(String(item.periodStDate)).format('YYYY-MM-DD') + ' 00:00:00'
									const endTime =dayjs(String(item.periodEnDate)).format('YYYY-MM-DD') + ' 23:59:59'
									return {
										code: index,
										description: `${startTime} 至 ${endTime}`,
										periodStDate: item.periodStDate,
										periodEnDate: item.periodEnDate,
										periodStStr: startTime,
										periodEnStr: endTime
									}
								}
							)
							if(this.billDateList.length>4){
								this.billDateList.push({
									code: record.length,
									description: `${this.billDateList[4].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近4期)`,
									periodStDate: this.billDateList[4].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}else{
								this.billDateList.push({
									code: record.length,
									description: `${this.billDateList[record.length-1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近4期)`,
									periodStDate: this.billDateList[record.length-1].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}
							if(this.billDateList.length>8){
								this.billDateList.push({
									code: record.length+1,
									description: `${this.billDateList[8].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近8期)`,
									periodStDate: this.billDateList[8].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}else{
								this.billDateList.push({
									code: record.length+1,
									description: `${this.billDateList[record.length-1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近8期)`,
									periodStDate: this.billDateList[record.length-1].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}
							if(this.billDateList.length>12){
								this.billDateList.push({
									code: record.length+2,
									description: `${this.billDateList[12].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近12期)`,
									periodStDate: this.billDateList[12].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}else{
								this.billDateList.push({
									code: record.length+2,
									description: `${this.billDateList[record.length-1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近12期)`,
									periodStDate: this.billDateList[record.length-1].periodStDate,
									periodEnDate: this.billDateList[1].periodEnDate
								})
							}
							this.queryData.billEndDate = 1
						}else if(record.length == 1){
							this.billDateList = record.map(
								(item, index) => {
									const startTime =dayjs(String(item.periodStDate)).format('YYYY-MM-DD') + ' 00:00:00'
									const endTime =dayjs(String(item.periodEnDate)).format('YYYY-MM-DD') + ' 23:59:59'
									return {
										code: index,
										description: `${startTime} 至 ${endTime}`,
										periodStDate: item.periodStDate,
										periodEnDate: item.periodEnDate,
										periodStStr: startTime,
										periodEnStr: endTime
									}
								}
							)
						}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		dialogData(row) {
			let type = 0
			if (row.shouldPaymentReceiptParentAmount > 0) {
				type = 1
			}
			this.curData = {
				...row,
				type: type
			}
			this.chargeDialogVisible = true
		},
		// 鼠标摁下触发
		handleMounseDown(e, column, $index) {
			this.dragState.dragging = true
			this.dragState.start = parseInt($index - 0)
			// 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
			document.addEventListener('mouseup', this.handleMouseUp)
			// 添加拖拽结束事件
			document.addEventListener('dragend', this.handleMouseUp)
			// 对选中的表头允许其拖拽
			const dragclass = '.el-table__header-wrapper .' + column.id
			const dragDom = document.querySelectorAll(dragclass)
			dragDom.forEach((dom) => {
				// 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
				dom.setAttribute('draggable', true)
			})
		},
		/** 鼠标在拖拽移动时触发 */
		handleDragover(e, column, $index) {
			if (this.dragState.dragging) {
				// 获取当前滚动条的位置
				const scrollDom = this.$refs.elTable.bodyWrapper
				this.scrollX = scrollDom.scrollLeft
				const index = parseInt($index - 0) // 记录起始列
				/** 实时更改鼠标处于表头的位置 */
				if (index - this.dragState.start !== 0) {
					this.dragState.direction =
						index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
					this.dragState.end = parseInt($index - 0)
				} else {
					this.dragState.end = this.dragState.start
					this.dragState.direction = null
				}
			}
		},
		/** 鼠标抬起或拖拽结束触发 */
		handleMouseUp() {
			// 更新拖拽后的表头
			this.headDraged(this.dragState)
			const { end } = this.dragState
			// 初始化拖动状态
			this.dragState = {
				start: end, // 记录最后拖动的位置
				end: -9,
				dragging: false,
				direction: undefined
			}
			document.removeEventListener('mouseup', this.handleMouseUp)
			document.removeEventListener('dragend', this.handleMouseUp)
			setTimeout(() => {
				// 重置拖拽状态
				this.dragState.start = -9
			}, 500)
		},
		// 更新拖拽后的表头
		headDraged({ start, end, direction }) {
			if (direction) {
				const originColumn = this.newCol[start]
				// 有位置交换时，原先位置的元素删除，再在目标处插入
				this.oldCol.splice(start, 1)
				this.oldCol.splice(end, 0, originColumn)
				this.headKey = new Date().getTime() + '' // 更新table key值
				const uu_Id = this.$store.state.user.userInfo.id
				const uidKey = uu_Id + '_commonTableKey_memberTeamBill'
				const getLocalTableData = Storage.get('commonTableKey')
				if (getLocalTableData) {
					Storage.set(
						'commonTableKey',
						Object.assign(getLocalTableData, {
							[uidKey]: this.oldCol
						})
					)
				} else {
					Storage.set('commonTableKey', {
						[uidKey]: this.oldCol
					})
				}
				this.$nextTick(() => {
					// 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
					this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
				})
			}
		},
		// 拖动虚线样式设置
		cellClassName({ columnIndex }) {
			const { start, end, direction } = this.dragState
			const target = columnIndex - 0
			if (target === start) {
				// 被移动的元素
				return 'drag_start'
			} else if (target === end) {
				// 要移动的位置
				return `drag_end_${direction}`
			}
			return ''
		},
		changeTableSort({ column, prop, order }) {
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		loadData() {
			console.log(this.billDateList)
			if(!this.billDateList.length) return
			if(!this.queryData.searchMemberName){
				if(this.queryData.memberType=='5'){
					this.$message.warning('请先输入会员账号')
				}else if(this.queryData.memberType=='6'){
					this.$message.warning('请先输入上级代理')
				}else if(this.queryData.memberType=='7'){
					this.$message.warning('请先输入所属总代')
				}else if(this.queryData.memberType=='8'){
					this.$message.warning('请先输入所属代理')
				}
				return
			}

			const params = {
				...this.queryData,
				...this.getParams()
			}
			if([1,2,3,4,5].includes(params.periodType)){
				delete params.cycleStartDate
				delete params.cycleEndDate
			}else{
				delete params.periodType
				params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
				params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
			}
			if(!params.searchMemberName){
				delete params.memberType
				delete params.searchMemberName
			}
			delete params.billEndDate
			this.childrenAjaxData = JSON.parse(JSON.stringify(params))
			this.loading = true
			this.$api
				.memberTeamBillList(params)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
						this.subSummary = res?.data?.summary || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
			// this.$api
			// 	.memberTeamBillTotal(params)
			// 	.then((res) => {
			// 		this.loading = false
			// 		if (res.code === 200) {
			// 			this.totalSummary = res?.data || {}
			// 		}
			// 	})
			// 	.catch(() => {
			// 		this.loading = false
			// 	})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.queryData = {
				billEndDate: this.billDateList.length>1?1:'',
				periodType: 5,
				memberType: 5,
				searchMemberName: '',
			}
			this.searchTime = setSearchTime()
			this.loadData()
		},
		handleExportExcel() {
			if(!this.queryData.searchMemberName){
				if(this.queryData.memberType=='5'){
					this.$message.warning('请先输入会员账号')
				}else if(this.queryData.memberType=='6'){
					this.$message.warning('请先输入上级代理')
				}else if(this.queryData.memberType=='7'){
					this.$message.warning('请先输入所属总代')
				}else if(this.queryData.memberType=='8'){
					this.$message.warning('请先输入所属代理')
				}
				return
			}

			const params = {
				...this.queryData
			}
			if([1,2,3,4,5].includes(params.periodType)){
				delete params.cycleStartDate
				delete params.cycleEndDate
			}else{
				delete params.periodType
				params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
				params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
			}
			if(!params.searchMemberName){
				delete params.memberType
				delete params.searchMemberName
			}
			delete params.billEndDate
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'memberTeamBillExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_memberTeamBill'
			const getLocalTableData = Storage.get('commonTableKey')
			if (getLocalTableData) {
				Storage.set(
					'commonTableKey',
					Object.assign(getLocalTableData, {
						[uidKey]: this.oldCol
					})
				)
				this.oldCol = getLocalTableData[uidKey]
			} else {
				Storage.set('commonTableKey', {
					[uidKey]: this.oldCol
				})
			}
		},
		// 打开列设置弹框
		openColSettings() {
			this.colSettings.visible = true
		},
		// 取消列设置
		cancleSetColumn() {
			this.colSettings.visible = false
			this.colSettings.visible = false
			const getLocalTableData = Storage.get('commonTableKey')
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_memberTeamBill'
			if (getLocalTableData && getLocalTableData[uidKey]) {
				this.oldCol = getLocalTableData[uidKey]
			} else {
				this.oldCol.map((item, index) => {
					item.isShow = true
				})
			}
		},
		// 复原缺省
		clickDel() {
			this.oldCol.map((item, index) => {
				item.isShow = true
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
